<template>
  <section class="p-10">
    123
    <h1 ref="h1">{{ ip }}</h1>
  </section>
</template>
<script>
export default {
  data() {
    return {
      ip: "",
    };
  },
  methods: {
    getUserIP(onNewIP) {
      const _this = this;
      var RTCPeerConnection =
        /*window.RTCPeerConnection ||*/ window.webkitRTCPeerConnection ||
        window.mozRTCPeerConnection;

      if (RTCPeerConnection)
        (function () {
          var rtc = new RTCPeerConnection({ iceServers: [] });
          if (1 || window.mozRTCPeerConnection) {
            // FF [and now Chrome!] needs a channel/stream to proceed
            rtc.createDataChannel("", { reliable: false });
          }

          rtc.onicecandidate = function (evt) {
            // convert the candidate to SDP so we can run it through our general parser
            // see https://twitter.com/lancestout/status/525796175425720320 for details
            if (evt.candidate) grepSDP("a=" + evt.candidate.candidate);
          };
          rtc.createOffer(
            function (offerDesc) {
              grepSDP(offerDesc.sdp);
              rtc.setLocalDescription(offerDesc);
            },
            function (e) {
              console.warn("offer failed", e);
            }
          );

          var addrs = Object.create(null);
          addrs["0.0.0.0"] = false;
          function updateDisplay(newAddr) {
            if (newAddr in addrs) return;
            else addrs[newAddr] = true;
            var displayAddrs = Object.keys(addrs).filter(function (k) {
              return addrs[k];
            });
            // document.getElementById("list").textContent =
            //   displayAddrs.join(" or perhaps ") || "n/a";
            console.log(displayAddrs);
            const str = displayAddrs.join(" or perhaps ") || "n/a";

            _this.$refs.h1.textContent = str;
          }

          function grepSDP(sdp) {
            console.log(sdp);
            var hosts = [];
            sdp.split("\r\n").forEach(function (line) {
              // c.f. http://tools.ietf.org/html/rfc4566#page-39
              if (~line.indexOf("a=candidate")) {
                // http://tools.ietf.org/html/rfc4566#section-5.13
                var parts = line.split(" "), // http://tools.ietf.org/html/rfc5245#section-15.1
                  addr = parts[4],
                  type = parts[7];
                if (type === "host") updateDisplay(addr);
              } else if (~line.indexOf("c=")) {
                // http://tools.ietf.org/html/rfc4566#section-5.7
                var parts = line.split(" "),
                  addr = parts[2];
                updateDisplay(addr);
              }
            });
          }
        })();
      else {
        document.getElementById("list").innerHTML =
          '<code>ifconfig | grep inet | grep -v inet6 | cut -d" " -f2 | tail -n1</code>';
        document.getElementById("list").nextSibling.textContent =
          "In Chrome and Firefox your IP should display automatically, by the power of WebRTCskull.";
      }
    },
  },
  mounted() {
    this.getUserIP((ip) => {
      this.ip = ip;
      console.log(ip);
      console.log(this.ip);
    });
  },
};
</script>
